/*
@license

dhtmlxVault v.3.0.0 GPL

This software is covered by GPL license.
To use it in non-GPL project, you need obtain Commercial or Enterprise license
Please contact sales@dhtmlx.com. Usage without proper license is prohibited.
(c) Dinamenta, UAB.

*/
/*                                              Table of Content



        1. Material skin design and style elements

        2. Pivot MicroVars

        3. Diagram Editor MicroVars

        4. Property Sheet MicroVars

        5. Tree MicroVars

        6. Calendar MicroVars

        7. Menu MicroVars

        8. Toolbat MicroVars

        9. Ribbon MicroVars
*/
/*============================================================================================
                            1. Material Skin Design & Style Elements
==============================================================================================*/
/*============================================================================================
                                    2. Pivot MicroVars
==============================================================================================*/
/*============================================================================================
                                3. Diagram Editor MicroVars
==============================================================================================*/
/*============================================================================================
                                    4. Property Sheet MicroVars
==============================================================================================*/
/*============================================================================================
                                    5. Tree MicroVars
==============================================================================================*/
/*============================================================================================
                                    6. Calendar MicroVars
==============================================================================================*/
/*============================================================================================
                                    7. Vault MicroVars
==============================================================================================*/
/*============================================================================================
                                    7. Menu MicroVars
==============================================================================================*/
/*============================================================================================
                                    8. Toolbat MicroVars
==============================================================================================*/
/*============================================================================================
                                    9. Ribbon MicroVars
==============================================================================================*/
/*============================================================================================
                                    11. Combobox MicroVars
==============================================================================================*/
/*============================================================================================
                                    10. Slider MicroVars
==============================================================================================*/
/*============================================================================================
                                    19. FormBuilder MicroVars


// _____________________________ End Of FormBuilder Elements Style_____________________________



               
=======
              


/*============================================================================================
                                    11. Layout MicroVars
==============================================================================================*/
/*============================================================================================
                                12. Message / Alert / Confirm MicroVars
==============================================================================================*/
/*============================================================================================
                                    16. Chart MicroVars
==============================================================================================*/
/*============================================================================================
                                    16. Timepicker MicroVars
==============================================================================================*/
/* MaterialDesignIcons.com */
@font-face {
  font-family: "DHX Icons";
  src: url(./fonts/dhxicons-webfont.eot);
  src: url(./fonts/dhxicons-webfont.eot) format("embedded-opentype"), url(./fonts/dhxicons-webfont.woff2) format("woff2");
  font-weight: normal;
  font-style: normal; }

/* Generated by Glyphter (http://www.glyphter.com) on  Fri Aug 03 2018*/
@font-face {
  font-family: 'Glyphter';
  src: url(data:application/vnd.ms-fontobject;base64,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);
  src: url(data:application/vnd.ms-fontobject;base64,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) format("embedded-opentype"), url(data:application/font-woff;base64,d09GRgABAAAAAAPkAAoAAAAABigAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAD4AAABWVrVjM2NtYXAAAAE0AAAAPAAAAUoAlAF3Z2x5ZgAAAXAAAACrAAAAsJhbWd9oZWFkAAACHAAAACwAAAA2EjFAuGhoZWEAAAJIAAAAGAAAACQIXQQDaG10eAAAAmAAAAAIAAAACAgAAABsb2NhAAACaAAAAAYAAAAGAFgAAG1heHAAAAJwAAAAIAAAACABDwBFbmFtZQAAApAAAAE7AAACbdWMZSRwb3N0AAADzAAAABUAAAApARAAAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYHBkcWUDcGBaIMCOIAACXvwecAAB4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZiALMf//8EqwPT/A1D1QMDIxkA5YCSsZDADALO5Bwd4nGNgZgACFgbmVgZhBn0GCwYGVT1GdTtGcyCSYxQHIj5GdmVDE1tGY6AIUErZFEiAxIAYKGssKiwmz6gsCISMDLkTmJkakrSmxJWvlgjNZ2IqjJo508yRkcnDzIG5JSWoUlzOM4GJKcEzbRZvZPqstFmPmPtyUrp5fGOYmHvzOUpCo8qZWNW0mNzMzNwZRZObmRhjvZjiPTzimEIZZ/FGpf07y2gMAJXcJBIAeJxjYGRgYADii9o7yuP5bb4ycLMwgMD1zjppZJqFgbkVSHEwMIF4AA15CGR4nGNgZGBgYQCCGDAJYjMyoAImAAtGAG0EAAAABAAAAAAAAAAAWAAAAAEAAAACADkAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAB4nHWPS07DMBCGf/cFtBKqqGCH5AViASh9iFU37Jp9F92nrdOH0jhy3Eo9AOfhCJyAI9AbcAd+0gGhUmJ5/M03k3EC4AI7KOyfS+49K5wy23MJJ7gWLtPfCFfID8JVNPAoXKN/Eq7jHqFwAy04TlCVM2Z3eBZWaOJFuIRzvAqX6d+EK+R34Squ8CFcQ1OVhesYqZZwA7dqEZrUuMibqR5vdZhss7k37vscmtk6idyhHhmXL2yqu0Hnp/R7TL6Z9byPdezsSg9s6k2SWJ05uzQTH8y9z/rtdiw+mNgVf98g5XaI4HlOoTHGljFEwjPDvPDuTz5knGFNGx2pHuajIuZYwPI+jS4CdI689d/X5Njwth6tR8w8Zo/FijQoJn51J1yWJitqS5oJfVBM97R9tLnig/6AXZz0CTRjb6QAeJxjYGKAAC4G7AAozwhSAwAB1gASAAAA) format("woff"), url(data:font/ttf;base64,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) format("truetype"), url() format("svg");
  font-weight: normal;
  font-style: normal; }

.icon-upload:before {
  content: 'A';
  font-family: "Glyphter" !important;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.dxi:before,
.dxi-set {
  display: block;
  font: normal normal normal 24px/1 "DHX Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.dxi-chevron-down:before {
  content: "\F140"; }

.dxi-chevron-up:before {
  content: "\F143"; }

.dxi-filter-variant:before {
  content: "\F236"; }

.dxi-close:before {
  content: "\F156"; }

.dxi-unfold-more-horizontal:before {
  content: "\F54F"; }

.dxi-check:before {
  content: "\F12C"; }

.dxi-plus:before {
  content: "\F415"; }

.dxi-delete-forever:before {
  content: "\F5E8"; }

.dxi-download:before {
  content: "\F1DA"; }

.dxi-alert-circle:before {
  content: "\F028"; }

.dxi-checkbox-marked-circle:before {
  content: "\F133"; }

.dxi-blank:before {
  content: "\F68C";
  visibility: hidden; }

.dxi-18px.dxi-set, .dxi-18px.dxi:before {
  font-size: 18px; }

.dxi-24px.dxi-set, .dxi-24px.dxi:before {
  font-size: 24px; }

.dxi-36px.dxi-set, .dxi-36px.dxi:before {
  font-size: 36px; }

.dxi-48px.dxi-set, .dxi-48px.dxi:before {
  font-size: 48px; }

.dxi-dark:before {
  color: rgba(0, 0, 0, 0.54); }

.dxi-dark.mdi-inactive:before {
  color: rgba(0, 0, 0, 0.26); }

.dxi-light:before {
  color: white; }

.dxi-light.mdi-inactive:before {
  color: rgba(255, 255, 255, 0.3); }

.dxi-rotate-45 {
  /*
        // Not included in production
        &.dxi-flip-h:before {
            -webkit-transform: scaleX(-1) rotate(45deg);
            transform: scaleX(-1) rotate(45deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        &.dxi-flip-v:before {
            -webkit-transform: scaleY(-1) rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: scaleY(-1) rotate(45deg);
            filter: FlipV;
            -ms-filter: "FlipV";
        }
        */ }
  .dxi-rotate-45:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }

.dxi-rotate-90 {
  /*
        // Not included in production
        &.dxi-flip-h:before {
            -webkit-transform: scaleX(-1) rotate(90deg);
            transform: scaleX(-1) rotate(90deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        &.dxi-flip-v:before {
            -webkit-transform: scaleY(-1) rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: scaleY(-1) rotate(90deg);
            filter: FlipV;
            -ms-filter: "FlipV";
        }
        */ }
  .dxi-rotate-90:before {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }

.dxi-rotate-135 {
  /*
        // Not included in production
        &.dxi-flip-h:before {
            -webkit-transform: scaleX(-1) rotate(135deg);
            transform: scaleX(-1) rotate(135deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        &.dxi-flip-v:before {
            -webkit-transform: scaleY(-1) rotate(135deg);
            -ms-transform: rotate(135deg);
            transform: scaleY(-1) rotate(135deg);
            filter: FlipV;
            -ms-filter: "FlipV";
        }
        */ }
  .dxi-rotate-135:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg); }

.dxi-rotate-180 {
  /*
        // Not included in production
        &.dxi-flip-h:before {
            -webkit-transform: scaleX(-1) rotate(180deg);
            transform: scaleX(-1) rotate(180deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        &.dxi-flip-v:before {
            -webkit-transform: scaleY(-1) rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: scaleY(-1) rotate(180deg);
            filter: FlipV;
            -ms-filter: "FlipV";
        }
        */ }
  .dxi-rotate-180:before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); }

.dxi-rotate-225 {
  /*
        // Not included in production
        &.dxi-flip-h:before {
            -webkit-transform: scaleX(-1) rotate(225deg);
            transform: scaleX(-1) rotate(225deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        &.dxi-flip-v:before {
            -webkit-transform: scaleY(-1) rotate(225deg);
            -ms-transform: rotate(225deg);
            transform: scaleY(-1) rotate(225deg);
            filter: FlipV;
            -ms-filter: "FlipV";
        }
        */ }
  .dxi-rotate-225:before {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg); }

.dxi-rotate-270 {
  /*
        // Not included in production
        &.dxi-flip-h:before {
            -webkit-transform: scaleX(-1) rotate(270deg);
            transform: scaleX(-1) rotate(270deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        &.dxi-flip-v:before {
            -webkit-transform: scaleY(-1) rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: scaleY(-1) rotate(270deg);
            filter: FlipV;
            -ms-filter: "FlipV";
        }
        */ }
  .dxi-rotate-270:before {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg); }

.dxi-rotate-315 {
  /*
        // Not included in production
        &.dxi-flip-h:before {
            -webkit-transform: scaleX(-1) rotate(315deg);
            transform: scaleX(-1) rotate(315deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        &.dxi-flip-v:before {
            -webkit-transform: scaleY(-1) rotate(315deg);
            -ms-transform: rotate(315deg);
            transform: scaleY(-1) rotate(315deg);
            filter: FlipV;
            -ms-filter: "FlipV";
        }
        */ }
  .dxi-rotate-315:before {
    -webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg); }

.dxi-flip-h:before {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH"; }

.dxi-flip-v:before {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV"; }

.dxi-spin:before {
  -webkit-animation: dxi-spin 2s infinite linear;
  animation: dxi-spin 2s infinite linear; }

@-webkit-keyframes dxi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

@keyframes dxi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

.dhx_btn {
  box-sizing: border-box;
  border: none;
  outline: none;
  padding: 6px 16px;
  border-radius: 2px;
  font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  display: flex; }
  .dhx_btn--flat {
    background: #0288D1;
    color: #fff; }
    .dhx_btn--flat:hover {
      color: #fff;
      background: #0278b8;
      cursor: pointer; }
    .dhx_btn--flat:active {
      background-color: #02679e; }
    .dhx_btn--flat.dhx_btn .dhx-icon-block {
      color: #FFF; }
    .dhx_btn--flat.dhx_btn--secondary {
      color: #FFFFFF;
      background-color: #4C4C4C; }
      .dhx_btn--flat.dhx_btn--secondary:hover, .dhx_btn--flat.dhx_btn--secondary:focus {
        background-color: #3f3f3f; }
      .dhx_btn--flat.dhx_btn--secondary:active {
        background-color: #333333; }
    .dhx_btn--flat.dhx_btn--danger {
      color: #FFFFFF;
      background-color: #FF5252; }
      .dhx_btn--flat.dhx_btn--danger:hover {
        background-color: #ff3939; }
      .dhx_btn--flat.dhx_btn--danger:active {
        background-color: #ff1f1f; }
    .dhx_btn--flat.dhx_btn--success {
      color: #FFFFFF;
      background-color: #0AB169; }
      .dhx_btn--flat.dhx_btn--success:hover {
        background-color: #09995b; }
      .dhx_btn--flat.dhx_btn--success:active {
        background-color: #07814c; }
  .dhx_btn--link {
    border: none;
    background: transparent;
    color: #015785; }
    .dhx_btn--link:hover {
      background: rgba(2, 136, 209, 0.2);
      color: #015785;
      cursor: pointer; }
    .dhx_btn--link:active {
      background-color: rgba(2, 103, 158, 0.2); }
    .dhx_btn--link.dhx_btn--secondary {
      color: rgba(0, 0, 0, 0.7); }
      .dhx_btn--link.dhx_btn--secondary:hover {
        background-color: rgba(0, 0, 0, 0.07); }
      .dhx_btn--link.dhx_btn--secondary:active {
        background-color: rgba(0, 0, 0, 0.07); }
    .dhx_btn--link.dhx_btn--danger {
      color: #FF5252; }
      .dhx_btn--link.dhx_btn--danger:hover {
        background-color: rgba(255, 82, 82, 0.15); }
      .dhx_btn--link.dhx_btn--danger:active {
        background-color: rgba(255, 31, 31, 0.15); }
    .dhx_btn--link.dhx_btn--success {
      color: #0AB169; }
      .dhx_btn--link.dhx_btn--success:hover {
        background-color: rgba(10, 177, 105, 0.15); }
      .dhx_btn--link.dhx_btn--success:active {
        background-color: rgba(7, 129, 76, 0.15); }
  .dhx_btn--small {
    padding: 4px 8px !important;
    font-size: 14px;
    line-height: 20px;
    text-transform: capitalize; }
  .dhx_btn .dxi {
    font-size: 20px;
    margin-right: 4px;
    margin-left: -4px; }

.icon-btn {
  position: relative;
  cursor: pointer; }
  .icon-btn:active:after {
    background-color: rgba(0, 0, 0, 0.14); }
  .icon-btn:hover:after {
    opacity: 1; }
  .icon-btn:after {
    content: "";
    opacity: 0;
    width: 32px;
    height: 32px;
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 2;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.07);
    cursor: pointer;
    z-index: 3;
    transition: opacity .1s; }
  .icon-btn:before {
    position: absolute;
    z-index: 9999;
    display: block;
    width: 20px;
    height: 20px; }

.dhx_widget {
  font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: normal; }
  .dhx_widget * {
    box-sizing: border-box; }
  .dhx_widget button {
    font-weight: 500; }
  .dhx_widget .fa, .dhx_widget .fas, .dhx_widget .mdi, .dhx_widget .dxi {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: rgba(0, 0, 0, 0.54);
    line-height: 20px; }
    .dhx_widget .fa:before, .dhx_widget .fas:before, .dhx_widget .mdi:before, .dhx_widget .dxi:before {
      font-size: 100%;
      width: 20px;
      height: 20px;
      line-height: 20px; }
  .dhx_widget .dhx-icon-block {
    font-size: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    position: relative;
    z-index: 99; }
    .dhx_widget .dhx-icon-block:before {
      display: block; }

.dhx_noselect {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; }

.dhx_widget input:focus::-webkit-input-placeholder {
  color: transparent; }

.dhx_widget input:focus:-moz-placeholder {
  color: transparent; }

.dhx_widget input:focus::-moz-placeholder {
  color: transparent; }

.dhx_widget input:focus:-ms-input-placeholder {
  color: transparent; }

.dhx-webkit-scroll {
  overflow: auto; }
  .dhx-webkit-scroll::-webkit-scrollbar {
    width: 6px;
    height: 25px;
    background-color: transparent;
    border-left: 1px solid #EEEEEE; }
  .dhx-webkit-scroll::-webkit-scrollbar-thumb {
    height: 16px;
    width: 6px;
    border: 0px solid transparent;
    background-clip: padding-box;
    border-radius: 17px;
    background-color: #C1C1C1; }
  .dhx-webkit-scroll::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none; }
  .dhx-webkit-scroll::-webkit-scrollbar-corner {
    background-color: transparent; }

.dhx_cell {
  display: flex;
  flex-direction: column; }
  .dhx_cell .dhx_cell_content {
    flex: 1; }

.dhx_cell.flex,
.dhx_cell.flex > .dhx_cell_content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; }

.dhx_cell_content {
  overflow-y: auto; }

body > .dhx_cell.layout_y {
  height: 100%;
  margin: 0;
  border: none; }

.dhx_cell.layout_y {
  display: flex;
  flex-direction: column;
  overflow: hidden; }
  .dhx_cell.layout_y > .dhx_cell_content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden; }

.dhx_cell.layout_x {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden; }
  .dhx_cell.layout_x > .dhx_cell_content {
    display: flex;
    flex-direction: row; }

.dhx_cell {
  flex-wrap: nowrap;
  box-sizing: border-box;
  font-family: Helvetica, Tahoma;
  position: relative;
  z-index: 1;
  overflow: hidden; }

.dhx_cell_header, .dhx_cell_footer {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 12px 8px 12px 12px;
  background: #F7F7F7;
  color: #0288D1;
  min-height: 44px;
  border-bottom: 1px solid #DFDFDF;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between; }

body > .dhx_cell.layout_y, body > .dhx_cell.layout_x {
  border: none; }

.content.dhx_cell > .dhx_cell_content {
  padding: 8px; }

.dhx_cell_content {
  min-height: 25px; }

.space-around {
  margin: 8px; }

.no-space {
  margin: 0; }

.space-horizontal {
  margin-left: 8px;
  margin-right: 8px; }

.space-vertical {
  margin-top: 8px;
  margin-bottom: 8px; }

.layout_x > .dhx_cell.space-left, .layout_y > .dhx_cell_content > .dhx_cell.space-left {
  margin-left: 8px; }
  .layout_x > .dhx_cell.space-left-none, .layout_y > .dhx_cell_content > .dhx_cell.space-left-none {
    margin-left: 0px; }

.layout_x > .dhx_cell.space-right, .layout_y > .dhx_cell_content > .dhx_cell.space-right {
  margin-right: 8px; }
  .layout_x > .dhx_cell.space-right-none, .layout_y > .dhx_cell_content > .dhx_cell.space-right-none {
    margin-right: 0px; }

.layout_x > .dhx_cell.space-top, .layout_y > .dhx_cell_content > .dhx_cell.space-top {
  margin-top: 8px; }
  .layout_x > .dhx_cell.space-top-none, .layout_y > .dhx_cell_content > .dhx_cell.space-top-none {
    margin-top: 0px; }

.layout_x > .dhx_cell.space-bottom, .layout_y > .dhx_cell_content > .dhx_cell.space-bottom {
  margin-bottom: 8px; }
  .layout_x > .dhx_cell.space-bottom-none, .layout_y > .dhx_cell_content > .dhx_cell.space-bottom-none {
    margin-bottom: 0px; }

.border-all {
  border: 1px solid #DFDFDF; }

.border-none {
  border: none; }

.layout_x > .dhx_cell.border-left, .layout_y > .dhx_cell_content > .dhx_cell.border-left {
  border-left: 1px solid #DFDFDF; }
  .layout_x > .dhx_cell.border-left-none, .layout_y > .dhx_cell_content > .dhx_cell.border-left-none {
    border-left: none; }

.layout_x > .dhx_cell.border-right, .layout_y > .dhx_cell_content > .dhx_cell.border-right {
  border-right: 1px solid #DFDFDF; }
  .layout_x > .dhx_cell.border-right-none, .layout_y > .dhx_cell_content > .dhx_cell.border-right-none {
    border-right: none; }

.layout_x > .dhx_cell.border-top, .layout_y > .dhx_cell_content > .dhx_cell.border-top {
  border-top: 1px solid #DFDFDF; }
  .layout_x > .dhx_cell.border-top-none, .layout_y > .dhx_cell_content > .dhx_cell.border-top-none {
    border-top: none; }

.layout_x > .dhx_cell.border-bottom, .layout_y > .dhx_cell_content > .dhx_cell.border-bottom {
  border-bottom: 1px solid #DFDFDF; }
  .layout_x > .dhx_cell.border-bottom-none, .layout_y > .dhx_cell_content > .dhx_cell.border-bottom-none {
    border-bottom: none; }

.panel {
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid #DFDFDF;
  z-index: 99; }
  .panel .dhx_cell_header, .panel .dhx_cell_footer {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: none; }

.layout_x > .dhx_cell_content > .panel {
  margin: 8px; }

.layout_y > .dhx_cell_content > .panel {
  margin: 8px; }

.collapsed {
  box-shadow: none;
  color: #000000;
  overflow: hidden; }

.dhx_cell.layout_y > .dhx_cell.collapsed {
  flex-basis: 44px;
  flex-grow: 0; }

.dhx_cell.layout_y .dhx_cell_content > .dhx_cell.collapsed {
  flex: 0 0 44px !important; }
  .dhx_cell.layout_y .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_header > .header-action-icon, .dhx_cell.layout_y .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer > .header-action-icon {
    transform: rotate(-180deg);
    color: #000000; }
  .dhx_cell.layout_y .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_header .header-text, .dhx_cell.layout_y .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer .header-text {
    color: #000000; }

.dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed {
  transform: rotate(-180deg);
  flex: 0 0 44px !important; }
  .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_header, .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer {
    padding: 12px; }
    .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_header > .header-action-icon, .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer > .header-action-icon {
      width: 100%; }
      .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_header > .header-action-icon > .dxi, .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer > .header-action-icon > .dxi {
        transform: rotate(90deg);
        color: #000000; }
  .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer {
    display: none; }
  .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_header, .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer {
    min-width: 44px;
    box-sizing: border-box;
    height: 100%;
    flex-grow: 1;
    position: relative;
    margin: 0;
    border-bottom: none;
    border-left: 1px solid #DFDFDF; }
    .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_header > .header-text, .dhx_cell.layout_x > .dhx_cell_content > .dhx_cell.collapsed > .dhx_cell_footer > .header-text {
      display: block;
      writing-mode: vertical-rl;
      top: 50%;
      position: absolute;
      transform: translateY(-50%);
      color: #000000;
      height: 100%;
      text-align: center; }

.resizer.x {
  width: 8px; }
  .resizer.x:hover > .dxi {
    opacity: 1; }
  .resizer.x > .dxi {
    position: relative;
    transform: translateY(-50%);
    top: 50%;
    left: -8px;
    font-size: 24px;
    color: #BBBBBB;
    cursor: e-resize;
    opacity: 0; }
    .resizer.x > .dxi:before {
      width: 24px;
      color: #BBBBBB; }

.resizer.y {
  width: 100%;
  background: white;
  height: 8px;
  z-index: 100; }
  .resizer.y:hover > .dxi {
    opacity: 1; }
  .resizer.y > .dxi {
    display: inline-block;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    top: -8px;
    font-size: 24px;
    color: #BBBBBB;
    cursor: n-resize;
    opacity: 0; }
    .resizer.y > .dxi:before {
      width: 24px;
      color: #BBBBBB; }

.dhx-no-select {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.dhx_cell.elevation-1 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); }

.dhx_cell_content .panel {
  border: 1px solid #DFDFDF; }

.dhx_cell.shadow-bottom {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10; }

.dhx_cell.line-left {
  border-left: 1px solid #e0e0e0; }

.layout_x >
.user1, .layout_y >
.dhx_cell_content > .user1 {
  margin-right: 25px; }

.layout_x .user2, .layout_y > .dhx_cell_content .user2 {
  margin-left: 25px; }

.toolbar {
  height: 56px;
  padding: 0 12px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 500; }
  .toolbar .separator {
    height: 50%;
    width: 1px;
    background: #DFDFDF;
    position: relative;
    margin: 0 2px; }
  .toolbar .icon-btn {
    position: relative;
    cursor: pointer;
    margin: 0 10px; }
    .toolbar .icon-btn.active {
      background-color: transparent; }
      .toolbar .icon-btn.active:hover {
        background-color: transparent; }
      .toolbar .icon-btn.active:before {
        display: block;
        background: rgba(0, 0, 0, 0.15); }
      .toolbar .icon-btn.active:hover::after {
        display: none; }
    .toolbar .icon-btn .dxi {
      z-index: 99;
      position: relative;
      cursor: pointer; }
    .toolbar .icon-btn:first-child {
      margin: 0 10px 0 0; }
    .toolbar .icon-btn:last-child {
      margin: 0 0 0 10px; }
    .toolbar .icon-btn .counter {
      top: -12px;
      right: -6px; }
  .toolbar .menu-item {
    border-radius: 2px;
    align-self: stretch;
    box-sizing: border-box;
    font-weight: 500;
    line-height: 20px;
    padding: 8px 12px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center; }
    .toolbar .menu-item:hover {
      background-color: rgba(0, 0, 0, 0.07); }
    .toolbar .menu-item:active {
      background-color: #d4d4d4; }
    .toolbar .menu-item .dxi {
      margin: 0px 12px 0 -4px; }
  .toolbar .menu-item > .dhx-icon.sub-menu-opener {
    margin: 0 -4px 0 4px; }
    .toolbar .menu-item > .dhx-icon.sub-menu-opener .dxi {
      margin: 0; }
  .toolbar .text {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: default; }
  .toolbar .spacer {
    flex: 1; }
  .toolbar .img-btn {
    padding: 0 12px; }
    .toolbar .img-btn:hover {
      background-color: inherit; }
    .toolbar .img-btn .img-button-wrapper {
      height: 45px;
      width: 45px;
      position: relative; }
      .toolbar .img-btn .img-button-wrapper:hover:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.4); }
      .toolbar .img-btn .img-button-wrapper .img-button {
        width: 100%;
        height: 100%; }
    .toolbar .img-btn .counter {
      right: 8px; }
  .toolbar .counter {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #FE5E39;
    color: #FFFFFF;
    top: 4px;
    right: 4px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border-radius: 50%;
    z-index: 199;
    cursor: pointer; }
  .toolbar .input-container {
    margin: 0 0 0 14px;
    display: flex;
    position: relative;
    align-items: center; }
    .toolbar .input-container .dxi-icon {
      font-size: 20px;
      position: absolute;
      right: 4px;
      color: #979797;
      z-index: 4; }
    .toolbar .input-container .input-wrapper {
      position: relative;
      z-index: 2; }
      .toolbar .input-container .input-wrapper .input-animation {
        z-index: 3;
        content: "";
        display: block;
        height: 1px;
        width: 10px;
        background-color: #0288D1;
        position: absolute;
        bottom: 0;
        left: 50%;
        opacity: 0;
        transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1); }
    .toolbar .input-container input.text-input {
      outline: none;
      border: none;
      border-bottom: 1px solid #DEDEDE;
      height: 32px;
      padding: 0 32px 0 8px;
      line-height: 20px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.7); }
      .toolbar .input-container input.text-input:focus ~ .input-animation {
        width: 100%;
        left: 0;
        opacity: 1;
        transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
      .toolbar .input-container input.text-input:hover {
        cursor: pointer; }
  .toolbar .dhx_btn {
    align-self: center;
    margin: 0 4px; }
  .toolbar .dhx_btn_small {
    padding: 4px 8px !important; }
  .toolbar .icon-menu-item {
    padding: 0;
    align-self: center;
    position: relative; }
    .toolbar .icon-menu-item:hover {
      background-color: unset; }
    .toolbar .icon-menu-item:hover:before {
      display: block; }
    .toolbar .icon-menu-item:before {
      content: "";
      display: none;
      width: 32px;
      height: 32px;
      position: absolute;
      background-color: #E5E5E5;
      z-index: 2;
      top: -4px;
      left: -4px;
      border-radius: 50%; }
    .toolbar .icon-menu-item .dhx-icon {
      margin: 0;
      z-index: 4; }
      .toolbar .icon-menu-item .dhx-icon .dxi {
        font-size: 24px; }
    .toolbar .icon-menu-item .dhx-icon.sub-menu-opener {
      display: none; }
  .toolbar .active {
    background: rgba(0, 0, 0, 0.15); }
    .toolbar .active:hover {
      background: rgba(0, 0, 0, 0.15); }

.menu-popups .dhx_widget.menu-popup {
  z-index: 6 !important; }

.button-container {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  position: relative;
  font-weight: 500;
  align-self: stretch; }
  .button-container.no-text .dxi {
    margin: 0; }
  .button-container:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 2px; }
  .button-container:active {
    background-color: #d4d4d4; }
  .button-container .dxi {
    margin: 0px 8px 0 -4px;
    display: flex;
    align-items: center; }

.ripple-container-outside {
  position: absolute;
  left: -15px;
  top: -15px;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  pointer-events: none; }

.ripple-animation {
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.35s linear; }

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5); } }

#menu {
  display: inline-block; }

.main-menu {
  background-color: #EDEDED;
  display: flex;
  align-items: center;
  box-sizing: border-box; }
  .main-menu .menu-item {
    box-sizing: border-box;
    font-weight: 500;
    line-height: 20px;
    padding: 8px 12px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center; }
    .main-menu .menu-item:hover {
      background-color: rgba(0, 0, 0, 0.07); }
  .main-menu .separator {
    width: 1px;
    background: #DFDFDF;
    height: 20px;
    position: relative;
    margin: 0 2px; }
  .main-menu .dxi {
    display: block;
    text-align: center;
    margin: 0px 12px 0 -4px;
    line-height: 1;
    font-size: 20px;
    color: #757575; }
    .main-menu .dxi:before {
      display: block; }

.menu-popup {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  background-color: #FFFFFF; }
  .menu-popup .menu-item {
    background-color: #FFF;
    position: relative;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center; }
    .menu-popup .menu-item .menu-item-content {
      margin: 0 0 0 8px;
      line-height: 20px;
      display: inline-block;
      flex: 1; }
    .menu-popup .menu-item .hotkey {
      margin: 0 0 0 8px;
      color: rgba(0, 0, 0, 0.38);
      line-height: 20px; }
    .menu-popup .menu-item:hover {
      background-color: #EDEDED; }
  .menu-popup .dhx-icon {
    display: block;
    text-align: center; }
    .menu-popup .dhx-icon .dxi {
      font-size: 20px;
      width: 20px;
      height: 20px;
      color: #757575; }
      .menu-popup .dhx-icon .dxi:before {
        display: block; }
  .menu-popup .separator {
    width: calc(100% - 16px);
    margin: 2px auto;
    height: 1px;
    background: #DFDFDF; }

.dhx-icon.sub-menu-opener {
  margin: 0 0 0 12px; }
  .dhx-icon.sub-menu-opener > .dxi {
    width: 20px;
    height: 20px; }

.menu-item.disabled {
  cursor: not-allowed; }
  .menu-item.disabled:hover {
    background-color: transparent; }
  .menu-item.disabled .dhx-icon .dxi {
    color: rgba(0, 0, 0, 0.2); }
  .menu-item.disabled .menu-item-content {
    color: rgba(0, 0, 0, 0.2); }
  .menu-item.disabled .hotkey {
    color: rgba(0, 0, 0, 0.2); }

.icon-none:before {
  color: transparent !important; }

.main-menu .dhx_btn {
  margin: 0 4px; }

.dhx-message-container {
  position: fixed;
  z-index: 11100;
  top: 20px;
  right: 20px; }

.dhx-message {
  display: flex;
  justify-content: space-between;
  min-width: 230px;
  padding: 12px 8px 12px 12px;
  margin: 0 0 8px 0;
  border-radius: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif; }
  .dhx-message > .dxi {
    font-size: 20px;
    height: 20px;
    width: 20px;
    cursor: pointer; }
  .dhx-message.dhx-error {
    background-color: #FF5252;
    color: #FFFFFF; }

.dhx-blocker {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.8;
  z-index: 11110; }

.dhx-confirm {
  min-height: 220px;
  border-radius: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  width: 650px;
  position: relative;
  margin: 0 auto;
  padding: 28px;
  z-index: 11111; }
  .dhx-confirm .message-box-header {
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px 0; }
    .dhx-confirm .message-box-header > .mesage-box-title {
      color: rgba(0, 0, 0, 0.7);
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
      padding: 0 8px 0 0;
      word-break: break-all; }
    .dhx-confirm .message-box-header > .mesage-box-action {
      color: rgba(0, 0, 0, 0.54);
      cursor: pointer; }
      .dhx-confirm .message-box-header > .mesage-box-action > .dxi {
        font-size: 20px; }
  .dhx-confirm .confirm-message {
    margin: 0 0 28px 0;
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    line-height: 20px;
    max-height: 60px;
    overflow-y: auto; }
  .dhx-confirm .action-button {
    display: flex;
    justify-content: flex-end; }
    .dhx-confirm .action-button .apply-button, .dhx-confirm .action-button .reject-button {
      padding: 8px 16px; }
    .dhx-confirm .action-button .dhx_btn:last-child {
      margin: 0 0 0 16px; }

.dhx-alert {
  min-height: 220px;
  border-radius: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  width: 650px;
  position: relative;
  margin: 0 auto;
  padding: 28px;
  z-index: 11111; }
  .dhx-alert .message-box-header {
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px 0; }
    .dhx-alert .message-box-header > .mesage-box-title {
      color: rgba(0, 0, 0, 0.7);
      font-size: 18px;
      font-weight: 500;
      line-height: 24px; }
    .dhx-alert .message-box-header > .mesage-box-action {
      height: 20px;
      width: 20px;
      color: rgba(0, 0, 0, 0.54);
      font-size: 20px;
      cursor: pointer; }
  .dhx-alert > .alert-message {
    margin: 0 0 28px 0;
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    line-height: 20px;
    max-height: 60px;
    overflow-y: auto; }
  .dhx-alert .action-button {
    display: flex;
    justify-content: flex-end; }
    .dhx-alert .action-button .dhx_btn:last-child {
      margin: 0 0 0 16px; }
    .dhx-alert .action-button .alert-btn {
      padding: 8px 16px; }

.dhx-error {
  opacity: 1;
  transition: all 1.5s cubic-bezier(0.25, 0.8, 0.25, 1); }

.dhx-confirm.btn-center-aligment .action-button {
  justify-content: center; }

.dhx-confirm.btn-left-aligment .action-button {
  justify-content: flex-start; }

.dhx-tooltip {
  pointer-events: none;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  transition: opacity transform 0.01s ease;
  opacity: 0;
  z-index: 9999999;
  font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif; }
  .dhx-tooltip .tooltip-text {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px; }
  .dhx-tooltip.botoom {
    margin: 8px 0 0 0; }
  .dhx-tooltip.top {
    margin: -8px 0 0 0; }
  .dhx-tooltip.left {
    margin: 0 0 0 -8px; }
  .dhx-tooltip.right {
    margin: 0 0 0 8px; }

.animate-tooltip {
  opacity: 1;
  transition: opacity 0.15s ease-out; }

.forced {
  opacity: 1; }

.dhx-tooltip.tooltip-light {
  pointer-events: none;
  border-radius: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  transition: opacity transform 0.01s ease;
  z-index: 9999999;
  font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif; }
  .dhx-tooltip.tooltip-light .tooltip-text {
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px; }

.ribbon {
  display: inline-flex;
  align-items: flex-start;
  border: 1px solid #DFDFDF;
  border-radius: 2px;
  background-color: #F7F7F7;
  padding: 12px 12px 8px 8px;
  box-sizing: border-box; }
  .ribbon .dhx_btn {
    margin: 0 4px 4px 4px; }
  .ribbon > .ribbon-item-block {
    margin: 0 8px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch; }
  .ribbon .block-label {
    text-align: center;
    line-height: 16px;
    font-size: 14px;
    margin: 6px 0 0 0;
    position: relative; }
    .ribbon .block-label:before {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.07);
      position: absolute;
      bottom: 7px;
      left: 0;
      z-index: 3; }
    .ribbon .block-label span {
      background-color: #F7F7F7;
      z-index: 5;
      position: relative;
      padding: 0 8px; }
  .ribbon .element {
    border: 1px solid #DFDFDF;
    margin: 0 0 4px 4px;
    padding: 5px 12px;
    box-sizing: border-box; }
    .ribbon .element .dxi {
      font-size: 20px; }
    .ribbon .element .button-text {
      font-size: 14px;
      line-height: 20px; }
  .ribbon .icon-menu-item {
    cursor: pointer; }
    .ribbon .icon-menu-item:hover {
      background-color: rgba(0, 0, 0, 0.07); }
    .ribbon .icon-menu-item .dhx-icon.sub-menu-opener {
      display: none; }
  .ribbon .button-container.img-text-btn {
    display: flex;
    align-items: center;
    min-width: 94px;
    padding: 5px 12px; }
    .ribbon .button-container.img-text-btn img {
      max-width: 20px;
      max-height: 20px;
      margin: 0 8px 0 0; }
    .ribbon .button-container.img-text-btn.big {
      flex-direction: column;
      align-self: stretch;
      justify-content: space-between;
      min-width: 68px;
      min-height: 68px;
      padding: 4px 0 2px 0; }
      .ribbon .button-container.img-text-btn.big img {
        max-width: 40px;
        max-height: 40px;
        margin: 0; }
  .ribbon .img-btn {
    padding: 12px; }
    .ribbon .img-btn:hover {
      background-color: rgba(0, 0, 0, 0.07); }
    .ribbon .img-btn .img-button-wrapper {
      height: 42px;
      width: 42px; }
      .ribbon .img-btn .img-button-wrapper .img-button {
        width: 100%;
        height: 100%; }
    .ribbon .img-btn .counter {
      right: 8px;
      top: 8px; }
  .ribbon .counter {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #FE5E39;
    color: #FFFFFF;
    top: 4px;
    right: 4px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border-radius: 50%;
    z-index: 5; }
  .ribbon .menu-item {
    box-sizing: border-box;
    font-weight: 500;
    line-height: 20px;
    padding: 5px 8px 5px 8px;
    min-width: 92px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .ribbon .menu-item:hover {
      background-color: rgba(0, 0, 0, 0.07); }
    .ribbon .menu-item .dhx-icon {
      margin: 0px 8px 0 0px;
      display: inline; }
    .ribbon .menu-item .sub-menu-opener {
      margin: 0 0 0 8px; }
  .ribbon .input-container {
    padding: 2px 0;
    display: flex;
    position: relative;
    align-items: center;
    background-color: #F7F7F7; }
    .ribbon .input-container .dxi-icon {
      font-size: 20px;
      position: absolute;
      top: 6px;
      right: 4px;
      color: #979797; }
    .ribbon .input-container input.text-input {
      background-color: #F7F7F7;
      outline: none;
      border: none;
      height: 26px;
      padding: 0 28px 0 8px;
      line-height: 20px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.7); }
      .ribbon .input-container input.text-input::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.54); }
  .ribbon .dhx_btn {
    padding: 6px 12px;
    border: none; }
  .ribbon .text.element {
    padding: 8px 12px; }
  .ribbon .ribbon-item-block.ribbon-row > .block-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start; }
  .ribbon .ribbon-item-block.ribbon-cols > .block-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
  .ribbon .button-container.main-btn.element.big {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 68px;
    min-height: 68px;
    box-sizing: border-box; }
    .ribbon .button-container.main-btn.element.big .dhx-icon {
      margin: 2px 0 0 0; }
  .ribbon .button-container.main-btn.element {
    min-width: 94px; }
    .ribbon .button-container.main-btn.element > .dhx-icon {
      margin: 0px 8px 0 0px; }
  .ribbon .button-container.icon-btn.element .dhx-icon {
    margin: 0; }

.sidebar {
  display: flex;
  flex-direction: column; }
  .sidebar .item-wrapper {
    display: flex;
    flex-direction: row; }
    .sidebar .item-wrapper > .dxi {
      width: 34px;
      height: 34px;
      line-height: 34px;
      font-size: 20px; }
  .sidebar .active {
    position: relative; }
    .sidebar .active::before {
      content: "";
      left: 0;
      top: 0;
      position: absolute;
      height: 100%;
      width: 4px;
      background: blue; }

.with-childs {
  display: flex;
  flex-direction: column; }
  .with-childs > .item-wrapper {
    display: flex;
    position: relative;
    flex: 1; }
    .with-childs > .item-wrapper > .element {
      flex: 1; }
    .with-childs > .item-wrapper > .dxi {
      position: absolute;
      margin: 10px 4px 0 0;
      top: 0;
      right: 0;
      width: 20px;
      height: 20px; }

.vault .dhx-files-grid {
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  width: 100%;
  background: #F7F7F7; }
  .vault .dhx-files-grid > .dhx-grid-content {
    display: flex;
    box-sizing: content-box;
    width: calc(100% + 9px);
    width: 100%;
    padding: 8px 0 8px 8px;
    flex-wrap: wrap; }
  .vault .dhx-files-grid.dhx-webkit-scroll::-webkit-scrollbar {
    border-left: 1px solid transparent; }
  .vault .dhx-files-grid.dhx-webkit-scroll > .dhx-grid-content {
    width: 100%; }
  .vault .dhx-files-grid .dhx-file-grid-item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100px;
    height: 120px;
    margin: 0;
    margin: 0 8px 8px 0;
    transition: all .1s ease;
    animation: add-file 1s ease alternate; }
    .vault .dhx-files-grid .dhx-file-grid-item.in-queue .dhx-preview-wrapper {
      opacity: .5; }
    .vault .dhx-files-grid .dhx-file-grid-item:hover .dhx-file-info {
      display: block; }
    .vault .dhx-files-grid .dhx-file-grid-item:hover.failed .dhx-preview-wrapper:after {
      background: rgba(255, 82, 82, 0.8); }
    .vault .dhx-files-grid .dhx-file-grid-item:hover.failed .dhx-size {
      display: none; }
    .vault .dhx-files-grid .dhx-file-grid-item:hover .dhx-preview-wrapper:after {
      position: absolute;
      z-index: 1;
      top: -1px;
      left: -1px;
      display: block;
      width: 100px;
      height: 100px;
      content: "";
      transition: all .2s ease;
      animation: grid-item-hover .2s ease alternate;
      pointer-events: none;
      opacity: 1;
      border-radius: 2px;
      background-color: rgba(2, 136, 209, 0.8); }
    .vault .dhx-files-grid .dhx-file-grid-item:hover .dhx-hover-actions {
      opacity: 1; }
    .vault .dhx-files-grid .dhx-file-grid-item:hover .dhx-default-actions {
      display: none; }
    .vault .dhx-files-grid .dhx-file-grid-item .dhx-server-file-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .vault .dhx-files-grid .dhx-file-grid-item.in-progress > .dhx-preview-wrapper:hover:after {
      display: none; }
    .vault .dhx-files-grid .dhx-file-grid-item .icon-btn:after {
      background-color: rgba(255, 255, 255, 0.2); }
    .vault .dhx-files-grid .dhx-file-grid-item .icon-btn:active:after {
      background-color: rgba(255, 255, 255, 0.3); }
    .vault .dhx-files-grid .dhx-file-grid-item .dhx-default-actions {
      position: absolute;
      z-index: 100;
      top: 12px;
      right: 12px; }
      .vault .dhx-files-grid .dhx-file-grid-item .dhx-default-actions .warning-status {
        color: #FF5252; }
        .vault .dhx-files-grid .dhx-file-grid-item .dhx-default-actions .warning-status:after {
          position: absolute;
          z-index: -1;
          top: 2px;
          left: 2px;
          width: 15px;
          height: 15px;
          content: "";
          pointer-events: none;
          opacity: 1;
          border-radius: 50%;
          background: #FFF; }
      .vault .dhx-files-grid .dhx-file-grid-item .dhx-default-actions .uploaded-status {
        pointer-events: none;
        color: #0AB169; }
        .vault .dhx-files-grid .dhx-file-grid-item .dhx-default-actions .uploaded-status:after {
          position: absolute;
          z-index: -1;
          top: 2px;
          left: 2px;
          width: 15px;
          height: 15px;
          content: "";
          pointer-events: none;
          opacity: 1;
          border-radius: 50%;
          background: #FFF; }
    .vault .dhx-files-grid .dhx-file-grid-item .dhx-hover-actions {
      position: absolute;
      z-index: 100;
      top: 12px;
      left: 0;
      display: flex;
      width: 100%;
      max-width: 100%;
      padding: 0 12px;
      opacity: 0;
      justify-content: flex-end; }
      .vault .dhx-files-grid .dhx-file-grid-item .dhx-hover-actions .action-download {
        margin: 0 34px 0 0; }
      .vault .dhx-files-grid .dhx-file-grid-item .dhx-hover-actions .icon-btn {
        position: relative;
        color: #FFF; }
    .vault .dhx-files-grid .dhx-file-grid-item .dhx-file-info {
      position: absolute;
      z-index: 99;
      bottom: 0;
      left: 0;
      display: none;
      width: 100%;
      padding: 4px;
      text-align: center;
      color: #FFF; }
    .vault .dhx-files-grid .dhx-file-grid-item > .dhx-preview-wrapper {
      position: relative;
      box-sizing: border-box;
      height: 100px;
      border: 1px solid #DFDFDF;
      border-radius: 2px;
      background-color: #FFF;
      -ms-box-sizing: border-box; }
      .vault .dhx-files-grid .dhx-file-grid-item > .dhx-preview-wrapper > .dhx-size {
        font-size: 14px;
        line-height: 20px;
        position: absolute;
        z-index: 9;
        bottom: 4px;
        left: 50%;
        transform: translate(-50%, 0);
        color: #FFF; }
      .vault .dhx-files-grid .dhx-file-grid-item > .dhx-preview-wrapper > .dhx-file-preview {
        width: 100%;
        height: 100%;
        background-position: center center;
        background-size: 40px 40px; }
      .vault .dhx-files-grid .dhx-file-grid-item > .dhx-preview-wrapper > img {
        width: 100px;
        height: 100px;
        object-fit: cover; }
    .vault .dhx-files-grid .dhx-file-grid-item > .dhx-file-name {
      font-size: 12px;
      line-height: 20px;
      overflow: hidden;
      flex: 1;
      cursor: default;
      text-align: center;
      text-overflow: ellipsis;
      color: rgba(0, 0, 0, 0.7); }
    .vault .dhx-files-grid .dhx-file-grid-item > .dhx-preview-wrapper {
      position: relative; }
  .vault .dhx-files-grid .dhx-file-grid-item.to-remove {
    animation: remove-grid-file 0.2s linear alternate !important; }
  .vault .dhx-files-grid .dhx-preview-wrapper canvas {
    width: 100%;
    height: 100%; }
  .vault .dhx-files-grid .progress-layout .active-circle {
    transition: all .1s; }

@keyframes remove-grid-file {
  0% {
    width: 100px;
    opacity: 1; }
  50% {
    width: 100px;
    opacity: .5; }
  75% {
    width: 100px;
    opacity: .25; }
  85% {
    width: 85px;
    opacity: .2; }
  100% {
    width: 0;
    opacity: 0; } }

@keyframes grid-item-hover {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.progress-bar {
  position: relative;
  display: flex;
  height: 44px;
  padding: 0 5px 0 0;
  justify-content: flex-end;
  align-items: center; }
  .progress-bar .progress-indicator {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.07); }
    .progress-bar .progress-indicator:after {
      content: "";
      position: absolute;
      z-index: 3;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #0288D1;
      transition: width .2s; }
  .progress-bar .progress-text {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center; }
  .progress-bar .action-abort-all {
    z-index: 999;
    text-transform: capitalize; }

.vault-layout {
  border: 1px solid #dfdfdf;
  height: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar; }
  .vault-layout .dhx_cell {
    position: relative; }
  .vault-layout .vault {
    flex: 1; }
  .vault-layout.dhx_cell.layout_y {
    overflow: visible; }
    .vault-layout.dhx_cell.layout_y > .dhx_cell_content {
      overflow: visible; }
      .vault-layout.dhx_cell.layout_y > .dhx_cell_content > .dhx_cell.vault-topbar {
        overflow: visible; }
        .vault-layout.dhx_cell.layout_y > .dhx_cell_content > .dhx_cell.vault-topbar > .dhx_cell_content {
          overflow: visible; }

.vault.dhx_widget {
  background-color: #F7F7F7;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden; }
  .vault.dhx_widget .navigation-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 44px;
    padding: 0 8px 0 8px;
    border-bottom: 1px solid #DFDFDF; }
    .vault.dhx_widget .navigation-block .dxi {
      width: 20px;
      height: 20px;
      margin: 0 8px 0 0;
      cursor: pointer; }
    .vault.dhx_widget .navigation-block .action-remove-all {
      margin: 0 0 0 auto; }
  .vault.dhx_widget .dhx-files-block {
    width: 100%;
    box-sizing: border-box;
    overflow-y: overlay;
    background-color: #F7F7F7; }
  .vault.dhx_widget .dhx-file-item {
    box-sizing: border-box;
    border-bottom: 1px solid #DFDFDF;
    width: 100%;
    height: 48px;
    position: relative;
    padding: 0 12px 0 8px;
    background-color: #FFFFFF;
    animation: add-file .2s ease alternate;
    overflow: hidden; }
    .vault.dhx_widget .dhx-file-item.in-queue .dhx-file-icon {
      opacity: 0.5; }
    .vault.dhx_widget .dhx-file-item .dhx-hover-actions, .vault.dhx_widget .dhx-file-item .dhx-default-actions {
      transition: all .1s;
      position: absolute;
      top: 0;
      right: 0;
      min-width: 60px;
      text-align: right; }
    .vault.dhx_widget .dhx-file-item .warn-message {
      display: none; }
    .vault.dhx_widget .dhx-file-item .size {
      display: inline-block; }
    .vault.dhx_widget .dhx-file-item .dhx-hover-actions {
      opacity: 0; }
    .vault.dhx_widget .dhx-file-item:hover {
      background: #EDEDED; }
      .vault.dhx_widget .dhx-file-item:hover .dhx-hover-actions {
        opacity: 1; }
      .vault.dhx_widget .dhx-file-item:hover .warn-message {
        display: inline-block; }
      .vault.dhx_widget .dhx-file-item:hover .dhx-size-error {
        display: none; }
      .vault.dhx_widget .dhx-file-item:hover .dhx-default-actions {
        opacity: 0; }
    .vault.dhx_widget .dhx-file-item .progress-value {
      color: #0288D1; }
    .vault.dhx_widget .dhx-file-item > .dhx-file-action {
      position: relative;
      float: right;
      margin: 14px 0 0 0;
      cursor: pointer;
      display: flex;
      flex-direction: row; }
      .vault.dhx_widget .dhx-file-item > .dhx-file-action .dxi {
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.7);
        display: inline-block;
        vertical-align: top; }
      .vault.dhx_widget .dhx-file-item > .dhx-file-action .uploaded-status {
        pointer-events: none;
        color: #0AB169; }
        .vault.dhx_widget .dhx-file-item > .dhx-file-action .uploaded-status:before {
          font-size: 20px;
          width: 20px;
          height: 20px; }
      .vault.dhx_widget .dhx-file-item > .dhx-file-action .warning-status {
        width: 20px;
        height: 20px;
        font-size: 20px;
        color: #FF5252; }
        .vault.dhx_widget .dhx-file-item > .dhx-file-action .warning-status:before {
          width: 20px;
          height: 20px;
          display: block;
          position: absolute;
          top: 2px;
          z-index: 9999; }
      .vault.dhx_widget .dhx-file-item > .dhx-file-action .action-remove-file, .vault.dhx_widget .dhx-file-item > .dhx-file-action .action-download {
        font-size: 20px;
        width: 20px;
        height: 20px;
        color: #757575;
        position: relative; }
      .vault.dhx_widget .dhx-file-item > .dhx-file-action .action-remove-file {
        margin: 0 0 0 20px; }
      .vault.dhx_widget .dhx-file-item > .dhx-file-action .action-download:before {
        top: 2px; }
  .vault.dhx_widget .dhx-file-icon {
    height: 48px;
    width: 40px;
    padding: 9px 4px 9px 4px;
    box-sizing: border-box;
    float: left; }
  .vault.dhx_widget .dhx-file-type {
    width: 24px;
    height: 30px;
    overflow: hidden; }
    .vault.dhx_widget .dhx-file-type.other {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.apple {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.document {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.application {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.web {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.image {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.video {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.pdf {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.psd {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.text {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.audio {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.table {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.archive {
      background: url() no-repeat center center; }
    .vault.dhx_widget .dhx-file-type.presentation {
      background: url() no-repeat center center; }
  .vault.dhx_widget .dhx-file-title {
    float: left;
    line-height: 20px;
    box-sizing: border-box;
    width: 75%;
    margin: 6px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
    .vault.dhx_widget .dhx-file-title .dhx-title-content {
      color: rgba(0, 0, 0, 0.7);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%; }
    .vault.dhx_widget .dhx-file-title .dhx-file-info {
      height: 14px;
      width: calc(100% - 56px - 8px); }
      .vault.dhx_widget .dhx-file-title .dhx-file-info .dhx-size {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.54);
        margin: 0 8px 0 0;
        max-width: 56px; }
      .vault.dhx_widget .dhx-file-title .dhx-file-info .warn-message {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 14px;
        max-width: 100%;
        color: #FF5252; }
      .vault.dhx_widget .dhx-file-title .dhx-file-info .progress-value {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 14px; }
  .vault.dhx_widget .dhx-download-progress {
    height: 2px;
    max-width: 100%;
    position: absolute;
    left: 0px;
    bottom: -1px;
    background-color: #0288D1; }
  .vault.dhx_widget .download-link {
    text-decoration: none; }

.dhx-dropable-area {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%; }
  .dhx-dropable-area .dhx-big-icon-block {
    width: 60px;
    height: 60px;
    font-size: 60px; }
    .dhx-dropable-area .dhx-big-icon-block .dxi {
      width: 100%;
      height: 100%;
      font-size: 60px;
      text-align: center;
      color: #D8D8D8;
      display: flex;
      align-items: center; }
      .dhx-dropable-area .dhx-big-icon-block .dxi:before {
        width: 60px;
        height: 60px;
        font-size: 60px;
        line-height: 60px; }
  .dhx-dropable-area .drop-area-bold-text {
    color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center; }
  .dhx-dropable-area .drop-area-light-text {
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 8px 0; }

.action-add {
  text-transform: initial; }

.drop-here .dhx-big-icon-block > .dxi {
  color: #0288D1;
  font-size: 80px !important; }
  .drop-here .dhx-big-icon-block > .dxi:before {
    font-size: 80px; }
  .drop-here .dhx-big-icon-block > .dxi .file-name {
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis; }

.vault-topbar {
  height: 44px;
  box-shadow: none;
  border-bottom: 1px solid #DFDFDF;
  background-color: #F7F7F7; }
  .vault-topbar .vault-toolbar {
    background-color: inherit;
    height: 100%;
    box-shadow: none; }

.progress-layout {
  height: 100px;
  width: 100px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9999;
  position: absolute;
  top: -1px;
  left: -1px; }

svg.progress-circle {
  display: block;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  transform: translate(-50%, -50%);
  height: 60px;
  transform: rotate(-90deg);
  width: 60px;
  background-color: transparent; }

.progress-bar-background {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1); }

.progress-bar-active {
  fill: none;
  stroke: #0288D1; }

.progress-amount {
  position: absolute;
  color: #0288D1;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%); }

.vault-file-grid {
  flex: 1;
  background-color: #F7F7F7; }
  .vault-file-grid > .dhx_cell_content {
    display: flex;
    flex-direction: column; }

.dhx-dragin {
  border: 2px dashed #CCCCCC; }

.progress-indicator, .dhx-download-progress {
  transition: width .2s; }

.dhx-dragin .dhx-dropable-area {
  background-color: #EDEDED; }
  .dhx-dragin .dhx-dropable-area .dhx-big-icon-block {
    position: absolute;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    font-size: 80px;
    bottom: calc(50% - 40px);
    animation: move-upload-icon 0.35s alternate; }

@keyframes move-upload-icon {
  0% {
    transform: translate(0, 0);
    top: 75%;
    opacity: 0; }
  100% {
    transform: translate(0, -50%);
    top: 50%;
    opacity: 1; } }

@keyframes add-file {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes remove-list-file {
  0% {
    opacity: 1;
    height: 48px; }
  100% {
    opacity: 0;
    height: 0; } }

.dhx-file-item.to-remove {
  animation: remove-list-file .2s linear !important; }

.scroll-runner {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px; }

.dhx-tooltip.bottom {
  margin: 8px 0 0 0; }

.dhx-tooltip.top {
  margin: 0 0 8px 0; }

